<template>
  <div class="dashboard-page">
    <aside class="sidebar">
      <div class="profile-card">
        <img class="avatar" :src="adminAvatar" alt="Sarah Smith" />
        <div class="profile-info">
          <span class="name">Sarah Smith</span>
          <span class="role">Admin</span>
        </div>
      </div>

      <nav class="sidebar-menu">
        <template v-for="item in menu" :key="item.label">
          <RouterLink
            v-if="item.path"
            :to="item.path"
            :class="['menu-item', item.active && 'active']"
          >
            <i :class="['menu-icon', item.icon]"></i>
            <span>{{ item.label }}</span>
          </RouterLink>
          <button v-else :class="['menu-item', item.active && 'active']">
            <i :class="['menu-icon', item.icon]"></i>
            <span>{{ item.label }}</span>
          </button>
        </template>
      </nav>
    </aside>

    <main class="main-content">
      <header class="main-header">
        <div class="brand">
          <img :src="hospitalLogo" class="brand-logo" alt="Hospital Logo" />
          <div>
            <h1 class="page-title">Patient</h1>
            <p>Add Patient Information</p>
          </div>
        </div>

        <div class="header-actions">
          <button class="icon-btn"><i class="ri-notification-3-line"></i></button>
          <button class="icon-btn"><i class="ri-settings-3-line"></i></button>
        </div>
      </header>

      <section class="form-card">
        <header class="form-header">
          <h2>Add Patient Information</h2>
          <RouterLink class="badge badge-danger" to="/patient-profile">Patient List</RouterLink>
        </header>

        <form class="patient-form" @submit.prevent="submitForm">
          <div class="form-grid">
            <label class="form-field">
              <span>First Name *</span>
              <input v-model="form.firstName" type="text" placeholder="Enter first name" />
            </label>
            <label class="form-field">
              <span>Last Name *</span>
              <input v-model="form.lastName" type="text" placeholder="Enter last name" />
            </label>
            <label class="form-field">
              <span>Email Id *</span>
              <input v-model="form.email" type="email" placeholder="example@mail.com" />
            </label>
            <label class="form-field">
              <span>Mobile Number *</span>
              <input v-model="form.mobile" type="tel" placeholder="Enter mobile" />
            </label>
            <label class="form-field">
              <span>Age *</span>
              <input v-model.number="form.age" type="number" placeholder="Enter age" />
            </label>
            <label class="form-field select">
              <span>Gender *</span>
              <select v-model="form.gender">
                <option value="">Select gender</option>
                <option value="male">Male</option>
                <option value="female">Female</option>
                <option value="other">Other</option>
              </select>
            </label>
            <label class="form-field select">
              <span>Marital Status *</span>
              <select v-model="form.maritalStatus">
                <option value="">Select status</option>
                <option value="single">Single</option>
                <option value="married">Married</option>
                <option value="divorced">Divorced</option>
              </select>
            </label>
            <label class="form-field select">
              <span>Blood Group *</span>
              <select v-model="form.bloodGroup">
                <option value="">Select blood group</option>
                <option v-for="group in bloodGroups" :key="group" :value="group">{{ group }}</option>
              </select>
            </label>
            <label class="form-field">
              <span>Date of Birth *</span>
              <input v-model="form.dob" type="date" />
            </label>
          </div>

          <label class="form-field full">
            <span>Address</span>
            <input v-model="form.address" type="text" placeholder="Enter address" />
          </label>

          <div class="form-grid upload-row">
            <div class="upload-field">
              <span>Upload Image</span>
              <div class="upload-actions">
                <button type="button" class="badge badge-success">Browse Image</button>
                <span class="upload-hint">(Max 2MB)</span>
              </div>
            </div>
            <label class="form-field">
              <span>Suggest</span>
              <input v-model="form.suggest" type="text" placeholder="Enter suggestion" />
            </label>
          </div>

          <div class="form-actions">
            <button type="submit" class="btn-submit">Submit</button>
          </div>
        </form>
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { usePatientStore } from '../stores/patientStore'

const route = useRoute()
const router = useRouter()
const patientStore = usePatientStore()

const adminAvatar = 'https://i.pravatar.cc/100?img=48'
const hospitalLogo =
  "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><defs><linearGradient id='a' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' stop-color='%23ff86d5'/><stop offset='100%' stop-color='%23907cff'/></linearGradient></defs><rect x='4' y='4' width='56' height='56' rx='18' fill='%23ffffff' stroke='url(%23a)' stroke-width='4'/><path d='M32 14c9.9 0 18 8.1 18 18s-8.1 18-18 18S14 41.9 14 32 22.1 14 32 14zm0 6a12 12 0 100 24 12 12 0 000-24zm1.5 5v5.5H39v3H33.5V39h-3v-5.5H25v-3h5.5V25h3z' fill='url(%23a)'/></svg>"

const sidebarMenu = [
  { label: 'Menu', icon: 'ri-compass-3-line', path: '/' },
  { label: 'Dashboard', icon: 'ri-dashboard-2-line', path: '/dashboard' },
  { label: 'Patient Form', icon: 'ri-calendar-check-line', path: '/patient-form' },
  { label: 'Patient Profile', icon: 'ri-user-3-line', path: '/patient-profile' },
  { label: 'Payment', icon: 'ri-bill-line', path: '/payment-table' },
  { label: 'Reports', icon: 'ri-bar-chart-2-line', path: null },
  { label: 'Pharmacy', icon: 'ri-capsule-line', path: null },
  { label: 'Settings', icon: 'ri-equalizer-line', path: null },
  { label: 'Logout', icon: 'ri-shut-down-line', path: null },
]

const menu = computed(() =>
  sidebarMenu.map((item) => ({
    ...item,
    active: item.path === route.path,
  }))
)

const bloodGroups = ['A+', 'A-', 'B+', 'B-', 'AB+', 'AB-', 'O+', 'O-']

const blankFormState = {
  firstName: '',
  lastName: '',
  email: '',
  mobile: '',
  age: '',
  gender: '',
  maritalStatus: '',
  bloodGroup: '',
  dob: '',
  address: '',
  suggest: '',
}

const form = reactive({ ...blankFormState })

function resetForm() {
  Object.assign(form, blankFormState)
}

function submitForm() {
  patientStore.addPatient({
    firstName: form.firstName,
    lastName: form.lastName,
    email: form.email,
    mobile: form.mobile,
    age: form.age,
    gender: form.gender,
    maritalStatus: form.maritalStatus,
    bloodGroup: form.bloodGroup,
    dob: form.dob,
    address: form.address,
    suggest: form.suggest,
  })
  window.alert(`患者 ${form.firstName || '（未填写）'} ${form.lastName || ''} 的信息已保存（示例提示）！`)
  resetForm()
  router.push('/patient-profile')
}
</script>

<style scoped>
@import './shared-dashboard.css';

.form-card {
  background: var(--card-bg);
  border-radius: 32px;
  padding: 36px;
  box-shadow: var(--soft-shadow);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-header h2 {
  margin: 0;
  font-size: 24px;
}

.patient-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-grid {
  display: grid;
  gap: 20px 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--text-muted);
}

.form-field span {
  font-weight: 600;
  color: var(--text-body);
}

.form-field input,
.form-field select {
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(148, 123, 255, 0.18);
  padding: 0 16px;
  background: rgba(249, 250, 254, 0.9);
  box-shadow: inset 0 1px 2px rgba(31, 39, 79, 0.06);
}

.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23525670' d='M1.41 0L6 4.58 10.59 0 12 1.41 6 7.41 0 1.41z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.form-field.full {
  width: 100%;
}

.upload-row {
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
}

.upload-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.upload-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.upload-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
}

.btn-submit {
  border: none;
  background: linear-gradient(135deg, #ff89d6, #a788ff);
  color: #fff;
  padding: 14px 38px;
  border-radius: 22px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--soft-shadow);
}
</style>

